<template>
  <div class="main">
    <a-form :form="form" autocomplete="off">
      <div class="main-box">
        <div class="main-item">
          <div>止水描述</div>
          <a-form-item>
            <a-textarea
              v-decorator="[`waterStopDesc`, { initialValue: dataForm['waterStopDesc'] }]"
              :placeholder="isLook ? '暂无内容' : '请输入'"
              :autoSize="{ minRows: 4, maxRows: 8 }"
              :disabled="isLook"
              :maxLength="1024"
            />
          </a-form-item>
        </div>
        <div class="main-item">
          <div>周边缝</div>
          <div>图片</div>
          <a-form-item>
            <!-- 上传图片 -->
            <div>
              <div v-if="!isLook">
                <a-upload
                  accept="image/png,image/jpg,image/jpeg,image/bmp"
                  :before-upload="beforeUpload"
                  :action="action"
                  :headers="headers"
                  :data="{ type: 12 }"
                  list-type="picture-card"
                  :file-list="fileList1"
                  @preview="handlePreview1"
                  @change="handleChange1"
                >
                  <div v-if="fileList1.length < 5">
                    <img src="@/assets/home/photo.png" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
                <div class="upload-text">
                  <div>1、请上传.jpg、.png、.bmp等图片格式文件；</div>
                  <div>2、图片上传数量不超过5张；</div>
                </div>
              </div>
              <div v-else>
                <viewer v-if="fileList1.length" :images="fileList1">
                  <div class="image-box">
                    <div v-for="(src, index) in fileList1" class="imgBox">
                      <img class="myImage" :src="src.url" />
                    </div>
                  </div>
                </viewer>
                <!-- <a-carousel v-if="fileList1.length" arrows>
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <a-icon type="left-circle" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                  </div>
                  <div class="my-banner" v-for="(item, index) in fileList1" :key="index">
                    <img :src="item.url" />
                  </div>
                </a-carousel> -->
                <div class="color-white" v-else>暂无相关图片</div>
              </div>
            </div>
            <!-- 文本域 -->
          </a-form-item>
        </div>
        <div class="main-item">
          <div>备注</div>
          <a-form-item>
            <a-textarea
              v-decorator="[`peripheralJointDesc`, { initialValue: dataForm['peripheralJointDesc'] }]"
              :placeholder="isLook ? '暂无内容' : '请输入'"
              :autoSize="{ minRows: 4, maxRows: 8 }"
              :disabled="isLook"
              :maxLength="1024"
            />
          </a-form-item>
        </div>
        <div class="main-item">
          <div>垂直缝</div>
          <div>图片</div>
          <a-form-item>
            <!-- 上传图片 -->
            <div>
              <div v-if="!isLook">
                <a-upload
                  accept="image/png,image/jpg,image/jpeg,image/bmp"
                  :before-upload="beforeUpload"
                  :action="action"
                  :headers="headers"
                  :data="{ type: 12 }"
                  list-type="picture-card"
                  :file-list="fileList2"
                  @preview="handlePreview2"
                  @change="handleChange2"
                >
                  <div v-if="fileList2.length < 5">
                    <img src="@/assets/home/photo.png" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
                <div class="upload-text">
                  <div>1、请上传.jpg、.png、.bmp等图片格式文件；</div>
                  <div>2、图片上传数量不超过5张；</div>
                </div>
              </div>
              <div v-else>
                <viewer v-if="fileList2.length" :images="fileList2">
                  <div class="image-box">
                    <div v-for="(src, index) in fileList2" class="imgBox">
                      <img class="myImage" :src="src.url" />
                    </div>
                  </div>
                </viewer>
                <!-- <a-carousel v-if="fileList2.length" arrows>
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <a-icon type="left-circle" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                  </div>
                  <div class="my-banner" v-for="(item, index) in fileList2" :key="index">
                    <img :src="item.url" />
                  </div>
                </a-carousel> -->
                <div class="color-white" v-else>暂无相关图片</div>
              </div>
            </div>
            <!-- 文本域 -->
          </a-form-item>
        </div>
        <div class="main-item">
          <div>备注</div>
          <a-form-item>
            <a-textarea
              v-decorator="[`verticalJointDesc`, { initialValue: dataForm['verticalJointDesc'] }]"
              :placeholder="isLook ? '暂无内容' : '请输入'"
              :autoSize="{ minRows: 4, maxRows: 8 }"
              :disabled="isLook"
              :maxLength="1024"
            />
          </a-form-item>
        </div>
        <div class="main-item">
          <div>施工缝</div>
          <div>图片</div>
          <a-form-item>
            <!-- 上传图片 -->
            <div>
              <div v-if="!isLook">
                <a-upload
                  accept="image/png,image/jpg,image/jpeg,image/bmp"
                  :before-upload="beforeUpload"
                  :action="action"
                  :headers="headers"
                  :data="{ type: 12 }"
                  list-type="picture-card"
                  :file-list="fileList3"
                  @preview="handlePreview3"
                  @change="handleChange3"
                >
                  <div v-if="fileList3.length < 5">
                    <img src="@/assets/home/photo.png" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
                <div class="upload-text">
                  <div>1、请上传.jpg、.png、.bmp等图片格式文件；</div>
                  <div>2、图片上传数量不超过5张；</div>
                </div>
              </div>
              <div v-else>
                <viewer v-if="fileList3.length" :images="fileList3">
                  <div class="image-box">
                    <div v-for="(src, index) in fileList3" class="imgBox">
                      <img class="myImage" :src="src.url" />
                    </div>
                  </div>
                </viewer>
                <!-- <a-carousel v-if="fileList3.length" arrows>
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <a-icon type="left-circle" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                  </div>
                  <div class="my-banner" v-for="(item, index) in fileList3" :key="index">
                    <img :src="item.url" />
                  </div>
                </a-carousel> -->
                <div class="color-white" v-else>暂无相关图片</div>
              </div>
            </div>
            <!-- 文本域 -->
          </a-form-item>
        </div>
        <div class="main-item">
          <div>备注</div>
          <a-form-item>
            <a-textarea
              v-decorator="[`constructionJointDesc`, { initialValue: dataForm['constructionJointDesc'] }]"
              :placeholder="isLook ? '暂无内容' : '请输入'"
              :autoSize="{ minRows: 4, maxRows: 8 }"
              :disabled="isLook"
              :maxLength="1024"
            />
          </a-form-item>
        </div>
        <div class="main-item">
          <div>表面止水形式</div>
          <a-form-item>
            <a-textarea
              v-decorator="[`surfaceWaterproofForm`, { initialValue: dataForm['surfaceWaterproofForm'] }]"
              :placeholder="isLook ? '暂无内容' : '请输入'"
              :autoSize="{ minRows: 4, maxRows: 8 }"
              :disabled="isLook"
              :maxLength="1024"
            />
          </a-form-item>
        </div>
      </div>
      <a-divider v-if="!isLook" />
      <a-divider v-if="isLook && showFooter" />

      <a-form-item v-if="!isLook">
        <div class="my-btn">
          <a-button class="cancel" @click="cancel">取消</a-button>
          <a-button type="primary" @click="handleSubmit"> {{ '提交审核' }} </a-button>
        </div>
      </a-form-item>
      <a-form-item v-if="isLook && showFooter">
        <div class="my-btn">
          <a-button class="cancel" @click="cancel">取消</a-button>
          <a-button type="primary" @click="handleEdit"> {{ '编辑信息' }} </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getCache } from '@/utils/session';
import { readFile } from '@/api/user';
import { addDamInfoRecord } from '@/api/record.js';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  props: {
    dataForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formItem: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isLook: {
      type: Boolean,
      default: false
    },
    confimText: {
      type: String,
      default: '提交审核'
    },
    showFooter: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dataForm(nl, ol) {
      this.setForm();
    }
  },
  mounted() {
    this.setForm();
  },
  data() {
    return {
      dataFormNew: {},
      fileList1: [],
      fileList2: [],
      fileList3: [],
      previewVisible: false,
      previewImage: '',
      ruleForm: {},
      codeStatus: false,
      phoneCode: '获取验证码',
      headers: {
        'API-User-Token': getCache('TOKEN')
      },
      action: process.env.NODE_ENV === 'development' ? '/api/hydrobim/upload/uploadFile' : '/hydrobim/upload/uploadFile'
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'validate_other' });
  },
  methods: {
    beforeUpload(file) {
      //判断格式
      if (!this.isImage(file)) {
        this.$message.warning('只能选择.jpg .png .bmp文件');
        return false;
      }
    },
    isImage(file) {
      return /\.(bmp|jpg|jpeg|png)$/.test(file.name);
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.fileList1.length) {
            let arr = [];
            this.fileList1.map(item => {
              if (item.realUrl) {
                arr.push(item.realUrl);
              } else {
                arr.push(item.response.data.fileIds[0]);
              }
            });
            values.peripheralJointImg = arr.join(',');
          }
          if (this.fileList2.length) {
            let arr = [];
            this.fileList2.map(item => {
              if (item.realUrl) {
                arr.push(item.realUrl);
              } else {
                arr.push(item.response.data.fileIds[0]);
              }
            });
            values.verticalJointImg = arr.join(',');
          }
          if (this.fileList3.length) {
            let arr = [];
            this.fileList3.map(item => {
              if (item.realUrl) {
                arr.push(item.realUrl);
              } else {
                arr.push(item.response.data.fileIds[0]);
              }
            });
            values.constructionJointImg = arr.join(',');
          }
          values.damId = this.dataForm.id;
          values.panelType = 4;
          addDamInfoRecord(values).then(res => {
            if (res.code == 0) {
              this.$emit('cancel', true);
            }
          });
        }
      });
    },
    setForm() {
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      if (this.dataForm.peripheralJointImg) {
        this.dataForm.peripheralJointImg.split(',').map((it, index) => {
          this.fileList1.push({
            uid: index,
            name: 'touxiang.png',
            status: 'done',
            url: it,
            realUrl: it
          });
        });
      }
      if (this.dataForm.verticalJointImg) {
        this.dataForm.verticalJointImg.split(',').map((it, index) => {
          this.fileList2.push({
            uid: index,
            name: 'touxiang.png',
            status: 'done',
            url: it,
            realUrl: it
          });
        });
      }
      if (this.dataForm.constructionJointImg) {
        this.dataForm.constructionJointImg.split(',').map((it, index) => {
          this.fileList3.push({
            uid: index,
            name: 'touxiang.png',
            status: 'done',
            url: it,
            realUrl: it
          });
        });
      }
    },
    cancel() {
      this.$emit('cancel');
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview1(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange1({ fileList }) {
      this.fileList1 = fileList.filter(item => item.status);
    },
    async handlePreview2(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange2({ fileList }) {
      this.fileList2 = fileList.filter(item => item.status);
    },
    async handlePreview3(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange3({ fileList }) {
      this.fileList3 = fileList.filter(item => item.status);
    },
    handleEdit() {
      this.$emit(
        'handleEdit',
        {
          key: '3',
          title: '止水结构',
          type: 'structure',
          active: false
        },
        false
      );
    },
    resetFields() {
      this.form.resetFields();
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  padding: 0 24px;
  .main-item {
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
    .tigs {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
    }
    .ant-form-item {
      margin-bottom: 0;
    }
    .ant-input {
      background: rgba(22, 102, 240, 0.2);
      border: 1px solid #1666f0;
      color: #fff;
    }
    .my-btn {
      color: #ccc;
      background: #021c2e;
      border: 1px solid #1666f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .main-item ::v-deep .ant-input-suffix {
    color: #fff;
  }
  .main-item ::v-deep .ant-input-password-icon {
    color: #fff !important;
  }
  .main-item ::v-deep .ant-input {
    background: rgba(22, 102, 240, 0.2);
    border: 1px solid #1666f0;
    color: #fff;
  }
  .main-item ::v-deep .ant-select-selection {
    background: rgba(22, 102, 240, 0.2);
    border: 1px solid #1666f0;
    color: #fff;
  }
  .main-item ::v-deep i {
    // color: #fff;
  }
  .main-item ::v-deep .ant-upload {
    background: rgba(22, 102, 240, 0.2);
    border: 1px solid #1666f0;
  }

  .main-box {
    max-height: calc(100vh - 266px);
    overflow: hidden;
    overflow-y: auto;
    .upload-text {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
      line-height: 18px;
    }
  }
  .main-box::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }

  .my-btn {
    display: flex;
    justify-content: flex-end;
    .cancel {
      margin-right: 20px;
      color: #fff;
      background: rgba(22, 102, 240, 0.2);
      border-color: rgba(22, 102, 240, 0.2);
    }
  }
  .my-banner {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .color-white {
    color: #fff;
  }

  .imgBox {
    position: relative;
  }
  .image-box {
    display: flex;
    flex-wrap: wrap;
  }
  .myImage {
    width: 300px;
    height: 300px;
    margin: 10px;
    cursor: url('~@/assets/home/add1.png') 16 16, auto;
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 55vh;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
